<template>
	<el-dialog title="邀请码" :visible.sync="visible" top="30vh" width="430px">
		<div class="dialog-content">
			<p><i class="el-icon-bell"></i>如无邀请码，请联系客服（客服微信号：wkdaxiong）</p>
			<div class="code-box">
				<el-input
					v-for="(item, index) in codeList"
					:ref="'input-' + index"
					class="code-input"
					v-model="codeList[index]"
					maxlength="1"
					type="text"
					:key="item + index"
					@input="onInput(index)"
					@keydown.native="e => nativeOnInput(e, index)"
				></el-input>
			</div>
			<div class="get-invite">
				<el-popover placement="right" width="164" trigger="hover">
					<p class="popover">扫码添加客服获取邀请码</p>
					<img src="@/assets/images/wechat-code.png" alt="" />
					<a slot="reference">获取邀请码</a>
				</el-popover>
			</div>
		</div>
		<div class="dialog-footer">
			<el-button type="primary" size="small" @click="next" :disabled="btnLock"
				>确定</el-button
			>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'invitation',
	components: {},
	data() {
		return {
			visible: false,
			codeList: ['', '', '', ''],
			btnLock: true,
			phone: null,
			username: null
		};
	},
	created() {},
	methods: {
		open(item) {
			this.visible = true;
			setTimeout(() => {
				this.$refs['input-0'][0].focus();
			}, 0);

			if (item) {
				this.phone = item.phone;
				this.username = item.username;
			}
		},
		close() {
			this.visible = false;
		},
		next() {
			this.$service.common
				.bindInviteCode({
					inviteCode: this.codeList.join(''),
					phone: this.phone,
					username: this.username
				})
				.then(() => {
					this.$message('绑定成功');
					this.close();
					this.$emit('next');
				})
				.catch(err => {
					this.$message.error(err);
				})
				.done(() => {
					this.loading = false;
				});
		},
		onInput(i) {
			if (this.codeList[i] && i <= 4 - i) {
				this.$refs[`input-${i + 1}`][0].focus();
			}

			// 判断按钮是否启用
			let len = 0;
			this.codeList.forEach(item => {
				if (item) {
					len++;
				}
			});
			if (len === 4) {
				this.btnLock = false;
				this.next();
			} else {
				this.btnLock = true;
			}
		},
		nativeOnInput(e, i) {
			if (e.code === 'Backspace') {
				if (!this.codeList[i]) {
					if (i - 1 >= 0) {
						this.$refs[`input-${i - 1}`][0].focus();
						setTimeout(() => {
							this.$refs[`input-${i - 1}`][0].focus();
						}, 0);
					}
				} else {
					if (i - 1 >= 0) {
						setTimeout(() => {
							this.$refs[`input-${i - 1}`][0].focus();
						}, 0);
					} else {
						setTimeout(() => {
							this.$refs['input-0'][0].focus();
						}, 0);
					}
				}
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.dialog-content {
    p {
        i {
            margin-right 4px
        }
        color $main-color
    }
    .code-box {
        padding 50px 0 20px
        display: flex;
        justify-content: space-around;
        position relative
		.code-input {
			width 40px
			>>>.el-input__inner {
				text-align center
				border none;
				border-radius 0
				padding 0 6px
				border-bottom 1px solid #000
				&:active, &:focus, &:hover {
					border-color $main-color
				}
			}
		}
    }
	.get-invite {
		flexBox(flex-end)
		margin-bottom 20px
		padding 0 24px
		a {
			cursor pointer
			font-size 12px
			color #646464
			transition .3s
			&:hover {
				color #000
			}
		}
	}
}
.popover {
	text-align center
	font-size 12px
}
</style>
